

Vue.component2('a_1_0_3_0_0', {  
    template: `
    <div class="a_1_0_3_0_0" 
      @mouseenter="handleMouseEnter"  
      @mouseleave="handleMouseLeave"
      :key="refresh"
      >
        <span :style="style2" :class="data.icon_class"></span> 
        <b><span :style="style2" v-if="data.add_show"class="a_1_0_3_0_0_add icon iconfont icon-add-bold"></span></b>
        <div class="a_1_0_3_0_0_sub_menu" :style="hovertext_style">
            <div class="a_1_0_3_0_0_sub_menu_item" ref="text">
                {{ data.hovertext}}
            </div>
        </div>
    </div>
`,  
  data() {
      return {
        refresh:"1",
        show_flag:true,
        hover_flag:false,
        style:{},
        hovertext_style:"visibility:hidden;",
        style2:"",
        data:{
            test:false,
            add_show:true,
            icon_class:"",//图标类
            icon_color:"rgba(231, 231, 231, 0.6)",//图标颜色
            background:"#212121",//背景颜色
            hovercolor:"#ffffff",//高亮颜色
            hovertext:"",//移动到位后的提示文字
            click:null,//点击触发函数
        }
      };
  },
  watch:{
    "data.icon_color":function(e){
        this.setstyle2("color",e);
        this.refresh_func();
    },
    "data.background":function(e){
        this.setstyle2("background",e);
        this.refresh_func();
    },
    "data.icon_class":function(e){
        this.refresh_func();
    },
    "data.hovercolor":function(e){
        this.refresh_func();
    },
    "data.hovertext":function(e){
        this.refresh_func();
    },
  },
  methods:{
    refresh_func:function(e){
        this.refresh=this.refresh=="2"?"1":"2";
    },
    handleMouseEnter(){  
        if(this.hover_flag==false){
            this.hover_flag=true; 
            this.style2=this.style2+`color:${this.data.hovercolor};`;
            let width=get_w2({"_this":this,"ref":`text`});
            // console.log('width',width)
            this.hovertext_style=`left:-${width}`;
        }
      },  
      handleMouseLeave() {  
        if(this.hover_flag==true){
            this.hover_flag=false; 
            let style2="";
            for (let key in this.style){
                style2=style2+`${key}:${this.style[key]};`
            }
            this.hovertext_style="visibility:hidden;";
            this.style2=style2;
        }
      } ,
    setstyle2:function(name,value){
        this.style[name]=value;
        let style2="";
        for (let key in this.style){
            style2=style2+`${key}:${this.style[key]};`
        }
        this.style2=style2;
    },
    handleclick:function(event,flag=null){
        // console.log("...?")
try{this.data.click()}
catch{}
if(!flag){event.stopPropagation();}//阻止父级
    }
  },
  mounted:function(){
    if(_this.deepcopy_data.test==true){
        _this.data.icon_class="icon iconfont icon-shujuku";
        _this.data.icon_color="rgba(231, 231, 231, 0.6)";
        _this.data.background="#212121";
        _this.data.hovercolor="#ffffff";
        _this.data.hovertext="提示字符";
        // _this.data.click=function(){alert("!!!")};

    }
    // console.log("30000",_this.deepcopy_data)
} }
);